<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="ISO-8859-1"%>
    <%@taglib uri="/struts-tags" prefix="s"%>
    <%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link href="/passeport-animalier/css/main.css" rel="stylesheet" type="text/css"/>
<title><s:text name="espace.veterinaire"/> </title>
<sj:head jqueryui="true" jquerytheme="flick"/>
</head>
<body>
	<jsp:include page="../layout/navigation_bar.jsp"/>
	<jsp:include page="../layout/header.jsp"/>
	<div class="wrapper">
		<jsp:include page="../layout/menu.jsp"/>
		<div class="content">
			<div class="title">
				<h5> <s:text name="titre.veterinaire.catalogue.medicaments"/>  <s:property value="catalogue.nom"/> </h5>
			</div>
 			<div class="nNote nFailure" style="display: none;" id="nFailure">
				<p id="actionError">
					
			    </p>
			</div> 
			<div class="nNote nSuccess" style="padding-left:47px;display: none;" id="nSuccess">  
		   		<p id="actionMessage">
				
				</p>
			</div>  
			<div class="widget first" style="width: 60%;" >
				<div class="head">
				     <h5 class="iList"> <s:text name="form.creation"/> </h5>
			    </div>
			    <div class="body">
			    	<s:form id="form" action="" namespace="" cssClass="mainForm" method="post" theme="simple">
			    	   <s:hidden name="id" value="%{catalogue.id}"></s:hidden>
					   <div class="rowElem">
					 	 <label> <s:text name="medicament.nom"/> </label>
					 	 <div class="formRight">
					  	   <sj:autocompleter id="listMedicaments" list="%{listMedicaments}" name="medicament.nom" />
					  	   <span class="field_error" id="span_medicament.nom"> <s:property value="errors['medicament.nom']"/> </span>
					 	 </div>
					 	 <div class="fix"></div>
			    	   </div>
					   <div class="rowElem">
					 	 <label> <s:text name="dossage.rytheme"/> </label>
					 	 <div class="formRight">
					  	   <input type="text" value="${dosageMedicament.rytheme}" name="dosageMedicament.rytheme" style="width:50%;" id="dosageMedicament.rytheme">
					  	   <span class="field_error" id="span_dosageMedicament.rytheme"> <s:property value="errors['dosageMedicament.rytheme]"/> </span>
					 	 </div>
					 	 <div class="fix"></div>
			    	   </div>
			    	   <div class="rowElem">
					 	 <label> <s:text name="dossage.uniteRytheme"/> </label>
					 	 <div class="formRight">
					  	   <div class="selector" id="uniform-undefined">
								<span style="-moz-user-select: none;" id="span1"> <s:property value="%{unitesRytheme[0]}"/> </span>
								<s:select list="unitesRytheme" name="dosageMedicament.uniteRytheme" cssStyle="opacity:0;" id="select1" onclick="change(1);"/>
							</div>
					  	   <span class="field_error" id="span_dosageMedicament.uniteRytheme"> <s:property value="errors['dosageMedicament.uniteRytheme]"/> </span>
					 	 </div>
					 	 <div class="fix"></div>
			    	   </div>
			    	   <div class="rowElem">
					 	 <label> <s:text name="dossage.quantite"/> </label>
					 	 <div class="formRight">
					  	   <input type="text" value="${dosageMedicament.quantite}" name="dosageMedicament.quantite" style="width:50%;" id="dosageMedicament.quantite">
					  	   <span class="field_error" id="span_dosageMedicament.quantite"> <s:property value="errors['dosageMedicament.quantite]"/> </span>
					 	 </div>
					 	 <div class="fix"></div>
			    	   </div>
			    	   <div class="rowElem">
					 	 <label> <s:text name="dossage.uniteDossage"/> </label>
					 	 <div class="formRight">
						   <div class="selector" id="uniform-undefined">
								<span style="-moz-user-select: none;" id="span2"> <s:property value="%{unitesDossage[0]}"/> </span>
								<s:select list="unitesDossage" name="dosageMedicament.uniteDosage" cssStyle="opacity:0;" id="select2" onclick="change(2);"/>
							</div>
					  	    <span class="field_error" id="span_dosageMedicament.uniteDosage"> <s:property value="errors['dosageMedicament.uniteDosage]"/> </span>
					 	 </div>
					 	 <div class="fix"></div>
			    	   </div>
			    	   <div class="rowElem">
								<s:submit cssClass="seaBtn submitForm" value="%{getText('form.save')}" onclick="ajouterMedicament();return false;" />
					   </div>
					   <div class="fix"></div>
			    	</s:form>
			    </div>
		    </div>
	    </div>
	</div>
	<jsp:include page="../layout/footer.jsp"/>
	<script type="text/javascript">
		function change(id){
			var selectElmt = document.getElementById("select"+id);
			var span = document.getElementById("span"+id);
			var textselectionne = selectElmt.options[selectElmt.selectedIndex].text;
			span.innerHTML=textselectionne;
		  };
		function ajouterMedicament(){
			var spans=$(".field_error");
			 for(var i=0;i<spans.length;i++){
				 spans[i].innerHTML="";
			 }
			$('#nSuccess').css('display','none');
			$('#nFailure').css('display','none');
			var form_data=$("#form").serialize();
			$.getJSON('medicament_catalogue.action',form_data,function(data) {
				//erreurs de saisie
			 	if(data.errors!=null){
			 		$.each(data.errors,function(cle,value){
			 		   	var span=document.getElementById("span_"+cle);
			 		   	span.innerHTML="<br/>"+value;
			 		   });
			 		return;
			 	}
			    if(data.actionErrors==null||data.actionErrors.length==0){
			    	$('#nSuccess').css('display','block');
			    	$('#actionMessage').html(data.actionMessages);
			    	document.getElementById("dosageMedicament.rytheme").value="";
			    	document.getElementById("dosageMedicament.quantite").value="";
			    }else{
			    	$('#nFailure').css('display','block');
			    	$('#actionError').html(data.actionErrors);
			    }
			  });
			
		};
	</script>
</body>
</html>